*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 让所有斜体 不倾斜 */
em,i{
  font-style: normal;
}
/* 去掉列表前面的小点 */
li{
  list-style: none;
}
/* 土拍你没有边框  去掉图片底侧的空白缝隙 */
img{
  border: 0;
  vertical-align: middle;
}
/* 让button按钮 变成小手 */
button{
  cursor: pointer;
}
/* 取消链接的下划线 */
a{
  color: #666;
  text-decoration: none;
}
a:hover{
  color: #e33333;
}
h4{
  font-weight: 400;
}
body{
  /* height: 100vh; */
  background: url(../images/bg.jpg) no-repeat center / cover;
}
.viewport{
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 9.75rem /* 780/80 */;
  background: url(../images/logo.png) no-repeat 0 0/contain;
  padding: 1.1rem /* 88/80 */.25rem /* 20/80 */0;
  display: flex;
}
.column{
  flex: 3;
}
.column:nth-child(2){
  flex: 4;
  margin: .4rem /* 32/80 */.25rem /* 20/80 */0;
  background-color: pink;
}
.panel{
  position: relative;
  height: 2.5rem /* 200/80 */;
  /* background-color: pink; */
  margin-bottom: .25rem /* 20/80 */;
  border: 20px solid #ccc;
  border-width: .625rem /* 50/80 */.5rem /* 40/80 */.25rem /* 20/80 */1.65rem /* 132/80 */;
  border-image: url(../images/border.png) 50 40 20 132;
}
.panel .inner{
  position: absolute;
  top: -0.625rem /* 50/80 */;
  right: -0.5rem /* 40/80 */;
  bottom: -0.25rem /* 20/80 */;
  left: -1.65rem /* 132/80 */;
  padding: .3rem /* 24/80 */.45rem /* 36/80 */;
  color: #fff;
}
.overview{
  height: 1.375rem /* 110/80 */;
}
.overview ul{
  display: flex;
  justify-content: space-between;
}
.overview ul li h4{
  font-size: .35rem /* 28/80 */;
  color: #fff;
  margin: 0 0 .06rem /* 4.8/80 */ .1rem /* 8/80 */;
}
.overview ul li span{
  font-size: .2rem /* 16/80 */;
  color: #4c9bfd;
}
.monitor{
  height: 6rem /* 480/80 */;
}
.monitor .inner{
  padding: .3rem /* 24/80 */0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs{
  padding: 0 .45rem /* 36/80 */;
  margin-bottom: .225rem /* 18/80 */;
  display: flex;
}
.monitor .tabs a{
  color: #1950c4;
  font-size: .225rem /* 18/80 */;
  padding: 0 .3375rem /* 27/80 */;
}
.monitor .tabs a:first-child{
  padding-left: 0;
  border-right: .025rem /* 2/80 */solid #00f2f1;
}
.monitor .tabs a.active{
  color: #fff;
}
.monitor .content{
  flex: 1;
  position: relative;
  display: none;
}
.monitor .head{
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: .15rem /* 12/80 */.45rem /* 36/80 */;
  color: #68d8fe;
  font-size: .175rem /* 14/80 */;
}
.monitor .marquee-view{
  position: absolute;
  top: .5rem /* 40/80 */;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.monitor .marquee-view .row{
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  padding: .15rem /* 12/80 */.45rem /* 36/80 */;
  color: #68d8ff;
  font-size: .15rem /* 12/80 */;
}
.monitor .marquee-view .row .icon-dot{
  position: absolute;
  left: .2rem /* 16/80 */;
  opacity: 0;
}
.monitor .marquee-view .row:hover{
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot{
  opacity: 1;
}
.monitor .col:first-child{
  width: 1rem;
}
.monitor .col:nth-child(2){
  width: 2.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3){
  width: 1rem;
}
@keyframes dong{
  to{
      transform: translateY(-50%);
  }
}
.monitor .marquee{
  animation: dong 10s linear infinite;
}
.monitor .marquee:hover{
  animation-play-state: paused;
}